<template>
	<view class="page-body">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{shopinfo.shop_name}}</block>
		</cu-custom>
		<view class="ballBOX" :animation="animationY" v-if="showBall" :style="'position:fixed;top:' + ballY + 'px;'">
			<view class="ball " :animation="animationX" :style="'position:fixed;left:' + ballX + 'px'">
				<text class="cuIcon-add "></text>
			</view>

		</view>

		<view class="s-main-condiner ">
			<view class="s-cont">
				<view class="s-cont-item" :class="{'hov':tabIndex == 0 }">
					<view class="search-main">
						<view class="search-box top-search ">
							<view class=" searchbox">
								<input placeholder="商品" v-model="keyword" style="width: 80%;">
								<text class="cuIcon-search clickEffict" @click="getGoods()"></text>
							</view>
						</view>
						<view class="goods-list" :style="[{height:swiperHeight+'px'}]">
							<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
								<view class="goods" v-for="(goods,key) in searchList" :key="key" >
									<image :src="goods.image" mode="aspectFill" class="goods-thumb"
										@error="errorGoods(key)" @click="clickGood(goods)"></image>
									<view style="position: relative; width: 75%; margin-left: 15rpx;">
										<view class="name ellipsis" @click="clickGood(goods)">{{goods.goods_name}}</view>
										<view class="describe ellipsis">{{goods.intro || '--'}}</view>
										<view class="describe ellipsis">销量：{{goods.sold_num}}</view>
										<view class="money">
											<text >￥{{goods.price*goods.discount}}</text>
										<text class="s-pass-price" v-if="goods.discount<1">￥{{goods.price}}</text>
										</view>
										<view class="num-btn">
											<view class="chose-btn" v-if="goods.spec.length > 0"
												@click="selectSpec(goods)">
												<text class="g-txt">选规格</text>
												<text class="g-num"
													v-if="cartGoodsNum[goods.goods_id] > 0">{{cartGoodsNum[goods.goods_id] || 0}}</text>
											</view>
											<view v-else>

												<yp-number-box :min="0" :max="goods.max_quantity"
													:value="cartGoodsNum[goods.goods_id]" :index="goods.goods_id"
													@change="cart">
												</yp-number-box>
											</view>
										</view>
									</view>
								</view>
								<view class="foot">

								</view>

							</scroll-view>
						</view>
					</view>

					<view class="cart-cont">
						<view class="cart-bg" @click="cartToggle" @touchmove.stop.prevent=""
							:class="{ 'cart-hide':cIshide }"></view>
						<view class="cart-goods-list" :class="{ 'cart-hide':cIshide }">
							<view class="prom-info">
								<text>{{cartInfo.prom_desc}}</text>
							</view>
							<view class="list-header">
								<text>已选商品￥{{cartInfo.packing_fee || 0}}</text>
								<view class="clear-cart" @click="clearCart">
									<text class="cuIcon-delete star-act"></text>
									<text>清空</text>
								</view>
							</view>
							<view class="list-goods" :style="{ 'height':cartHeight }">
								<scroll-view scroll-y="true" :style="{ 'height':cartHeight }"
									@touchmove.stop.prevent="">
									<view class="list-goods-item" v-for="(item,index) in cartInfo.goodsList"
										:key="index">
										<image class="cart-goods-img" mode="aspectFill" :src="item.goods_thumbs">
										</image>
										<view class="cart-goods-info">
											<view class="goods-title">{{item.goods_name}}</view>
											<view class="spec-key">{{item.item_name}}</view>
											<view class="price">￥{{item.goods_total_price}} </view>
											<view class="num-btn">
												<yp-number-box :min="0" :max="item.max_quantity"
													:value="cartGoodsNum[item.goods_id]" :index="item.goods_id"
													@change="cart" :item="item.item_key">
												</yp-number-box>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="cart-box">
							<view class="cart-left" @click="cartToggle">
								<view class="cartIco middle"
									:class="shoppingCartAnimation? 'shoppingCartAnimations' : '' ">
									<text class="cuIcon-cart" id="card"></text>
								</view>
								<view class="num">{{cartInfo.total_num || 0}}</view>
								<view class="cart-info">
									<view class="total-price"><text>￥{{cartInfo.goods_real_price || 0}}</text>

										<text class="hxPrice"
											v-if="cartInfo.goods_real_price != cartInfo.total_goods_price && cartInfo.total_goods_price!=0">￥{{cartInfo.total_goods_price}}
										</text>
									</view>
									<view class="shipping-fee">配送费{{shopinfo.delivery_fee || 0}}元<text
											class="delivery-tips"
											v-if="shopinfo.is_delivery_free==1">满{{shopinfo.delivery_free_money}}免配送费</text>
									</view>
								</view>
							</view>
							<view class="cart-right" v-if="cartInfo.total_goods_price<shopinfo.min_price">
								<text>满{{shopinfo.min_price}}起送</text>
							</view>
							<view class="sub-order" v-else @click="subOrder(shop_id)">
								<text>立即下单</text>
							</view>
						</view>
					</view>


				</view>
			</view>
		</view>


		<view class="spec-main" :class="{'no-show':is_show_spec==0}" @touchmove.stop.prevent="">
			
			<view class="spec-box">
				<view class="spec-box-head">
					<image class="spec-goods-img" mode="aspectFill" :src="specGoods.goods_thumbs[0]">
					</image>
					<view class="spex-box-name ">
						<view class="spec-goods-title">{{specGoods.goods_name}}</view>
						<view class="spec-key"><text>已选：</text>
						<text class="spec-key-item" v-for="(item,k) in checkedItems" :key="k" v-if="item">
						  {{item}}
						</text>
						  
						</view>
					</view>
				</view>
				
				<scroll-view scroll-y="true" class="spec-item-list" style="max-height: 600rpx;">
					<view class="spec-item" v-for="(spec,index) in specGoods.spec" :key="index">
						<view class="spec-key-name">{{spec.spec_name}}</view>
						<view class="item-key">
							<text v-for="(itemvalue,keys) in spec.items" :key="keys" style="border-radius: 5px;"
								:class="{'hov':itemvalue.checked==1}" :data-index="index" :data-key="keys"
								@click="checkItem">{{itemvalue.item_name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="spec-box-foot">
					<view class="total-price">
						<text>总价</text>
						<text class="price">￥{{checkedPrice}}</text>
					</view>
					<view class="changeBt">
						<view v-if="checkedNum > 0" class="">
							<yp-number-box :min="0" :max="specGoods.max_quantity" :value="checkedNum"
								:index="specGoods.goods_id" :is_change="is_change" chage @change="cart"></yp-number-box>
						</view>
						<view v-else>
							<button class="add cu-btn round sm" @click="addcart(specGoods.goods_id)">加入购物车</button>
						</view>
					</view>
				</view>
			
			
			   <view class="close-box middle">
			   	<text class="cuIcon-close cuIcon-roundclose close-spec"  @click="closeSpec"></text>
			   	
			   </view>
			   
			</view>
			
			
		</view>
		

		<uni-popup ref="gDetail" type="bottom">
			<view class="gDetail-cont">
				<imgsBanner :imgList='imgList' currentImg=0 class="detailimg"></imgsBanner>
				<view class="gDetail-info">
					<view class="name ">
						<TextOver :content="goodsInfo.goods_name" :isFixed="false" style="height: 100%;"></TextOver>

					</view>
					<view class="describe" v-if="goodsInfo.intro.length>0">
						<TextOver :content="goodsInfo.intro" :isFixed="false" style="height: 100%;"></TextOver>

					</view>
					<view class="describe ellipsis">销量：{{goodsInfo.sold_num}}</view>
					<view class="money"><text>￥{{goodsInfo.price*goodsInfo.discount}}</text><text
							class="s-pass-price">￥{{goodsInfo.price}}</text></view>
					<view class="num-btn">
						<view class="chose-btn" v-if="goodsInfo.spec_num > 0" @click="selectSpec(goodsInfo)">
							<text class="g-txt">选规格</text>
							<text class="g-num"
								v-if="cartGoodsNum[goodsInfo.goods_id] > 0">{{cartGoodsNum[goodsInfo.goods_id] || 0}}</text>
						</view>
						<view v-else>
							<yp-number-box :min="0" :max="goodsInfo.max_quantity"
								:value="cartGoodsNum[goodsInfo.goods_id]" :index="goodsInfo.goods_id" @change="cart">
							</yp-number-box>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import ypNumberBox from "@/app/ShopCenter/components/yp-number-box/yp-number-box.vue";
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

	export default {
		components: {
			ypNumberBox,
			uniPopup,
			
		},
		data() {
			return {
				domain: this.resDomain,
				StatusBar: this.Custom,
				shop_id: 0,
				user_id: 0,
				scrollHeight: '0px',
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				cartHeight: '0rpx',
				cIshide: true,
				isfixed: false,
				tabIndex: 0,
				commentList: {
					all: [],
					bad: [],
					figure: [],
					high: []
				},
				commIndex: 0,
				commentNow: [],
				shopinfo: {
					shop_name: '',
					shop_type: {}
				},
				specGoods: {},
				checkedItems: {},
				checkedNum: 0,
				checkedPrice: 0,
				itemPrice: {},
				cartList: {},
				cartInfo: {
					'total_goods_price': 0,
					'goodsList': {}
				},
				cartGoodsNum: {},
				is_change: false,
				searchList: [],
				keyword: '',
				is_show_spec: 0,
				goodsInfo: {},
				imgList: [],
				isshopShow: true,
				swiperHeight: '',
				showBall: false, // 小球是否显示
				animationY: '', // 动画Y
				animationX: '', // 动画X
				ballY: 0, // 小球当前位置Y
				ballX: 0, // 小球当前位置X
				shoppingCartAnimation: false,
				card: {
					x: 0,
					y: 0
				},
				status:-1,

			}
		},
		onLoad(option) {
			this.shop_id = option.shop_id;
			this.status=option.status;
			uni.getSystemInfo({
				success: (res) => {
					/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
					this.scrollHeight = `${res.windowHeight-255}px`;
				
				}
			});
			this.apiRequest('/buyer/comments', {
				shop_id: this.shop_id,
			}).then(res => {
				this.commentList = res.data
				this.commentNow = this.commentList.all
			})

			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.user_id = userInfo.user_id
			}

		},
		watch: {
			keyword(val) {
				this.getGoods();

			}

		},
		onShareAppMessage(res) {


			let dat = {
				params: '/app/TakeOut/pages/index/shopInfo',
				id: this.shop_id,
				key: "shop_id"
			}
			return {
				title: "一舟校园-" + this.shopinfo.shop_name,
				path: "/pages/basic/basic?param=" + JSON.stringify(dat),
			}

		},
		onShow() {
			uni.setStorageSync("isshow", true);
			this.getListData();
			const res = uni.getStorageSync('cartList-' + this.shop_id);
			if (res) {
				this.cartList = res
			} else {
				this.cartList = {}
			}
			const res1 = uni.getStorageSync('cartInfo-' + this.shop_id);
			if (res1) {
				this.cartInfo = res1
			} else {
				this.$set(this.cartInfo, 'total_goods_price', 0)
				this.$set(this.cartInfo, 'goodsList', {})
				this.$set(this.cartInfo, 'total_num', 0)
			}

			if (Object.keys(this.cartInfo['goodsList']).length <= 5) {
				this.cartHeight = Object.keys(this.cartInfo['goodsList']).length * 90 + 'px'
			} else {
				this.cartHeight = 5 * 90 + 'px'
			}

			const res2 = uni.getStorageSync('cartGoodsNum-' + this.shop_id);
			if (res2) {
				this.cartGoodsNum = res2
			} else {
				this.cartGoodsNum = {}
			}

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#card').boundingClientRect(data => {
				this.card.x = data.left;
				this.card.y = data.top;

			}).exec();
			this.getInfo().then((e) => {
				
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50;
				
			});
			//this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height) - 50;
		},
		methods: {
			
			clickGood(item){
				uni.setStorage({
					key: "good",
					data: item,
					success: () => {
						uni.navigateTo({
							url: "./info?shop_id=" + this.shop_id + "&status=" + this
								.status
						})
					}
				})
			},
			errorImg(index) { //图片加载失败给出默认图
				this.$nextTick(() => {
					this.shopinfo.recommend[index].goods_thumbs[0] = this.domian + "/static/img/error.png";
				})
			},
			errorGoods(index) {
				this.$nextTick(() => {
					this.searchList[index].image = this.domian + "/static/img/error.png";
				})
			},
			cart(e, a) {

				if (e.type == 'plus') {
					this.addPoint(a);
				}

				var items = '';
				var cart = {};
				if (e.item != null) {
					items = e.item
				} else {
					if (Object.keys(this.checkedItems).length > 0 && this.specGoods.goods_id == e.index) {
						let i = 0
						for (var item in this.checkedItems) {
							if (i == 0) {
								items += item
							} else {
								items += ',' + item
							}
							i++
						}
					}
				}

				this.$set(cart, 'goods_id', e.index)
				this.$set(cart, 'num', e.num)
				this.$set(cart, 'item', items)

				var that = this;
				var is_do = 0 //本次商品是否处理
				for (var cartItem in this.cartList) {
					if (cart.goods_id == that.cartList[cartItem].goods_id && that.cartList[cartItem].item ==
						items) { //查找商品是否存在购物车
						if (cart.num > 0) {
							this.$set(this.cartList, cartItem, cart)
						} else {
							delete(that.cartList[cartItem])
							this.checkedNum = 0
						}
						is_do = 1
					}
				}

				if (is_do == 0 && cart.num > 0) { //如果本次没处理，说明是新数据，追加到购物车中
					this.$set(this.cartList, cart.goods_id + '-' + cart.item, cart)
				}

				//console.log(this.cartList)

				let num = 0
				if (Object.keys(this.cartList).length > 0) {
					for (var cartKey in this.cartList) {
						if (this.cartList[cartKey].goods_id == cart.goods_id) {
							num += parseFloat(this.cartList[cartKey].num)
						}
					}
					this.$set(this.cartGoodsNum, cart.goods_id, parseFloat(num))
				} else {
					this.cartInfo = {
						'total_goods_price': 0,
						'goodsList': {}
					}
					this.cartHeight = '0px'
					this.cartGoodsNum = {}
					uni.removeStorageSync('cartList-' + this.shop_id)
					uni.removeStorageSync('cartInfo-' + this.shop_id)
					return
				}

				uni.setStorageSync('cartGoodsNum-' + this.shop_id, this.cartGoodsNum)
				uni.setStorageSync('cartList-' + this.shop_id, this.cartList)
				//console.log(this.cartList)
				this.apiRequest('/buyer/addCart', {
					cartList: this.cartList,
					shop_id: this.shop_id,
					user_id: this.user_id
				}).then(res => {
					if (res.code != 200) {
						return
					}


					this.cartInfo = res.data
					uni.setStorageSync('cartInfo-' + this.shop_id, this.cartInfo)

					if (Object.keys(this.cartInfo['goodsList']).length > 5) {
						this.cartHeight = '325px'
					} else {
						this.cartHeight = 90 * Object.keys(this.cartInfo['goodsList']).length + 'px'
					}
				})
			},
			addcart(goods_id) {
				this.checkedNum = 1
				this.is_change = true
			},
			selectSpec(goods) {
				this.is_change = false
				this.specGoods = goods
				this.is_show_spec = 1
				this.checkedItems = {} //初始化
				this.checkedPrice = 0
				this.checkedNum = 0
				var that = this
				var cGoods = {}

				if (Object.keys(this.cartList).length > 0) {
					for (var cartItem in this.cartList) {
						if (this.cartList[cartItem].goods_id == that.specGoods.goods_id) {
							cGoods = this.cartList[cartItem]
						}
					}
				}
				this.checkedPrice = parseFloat(this.specGoods.price)
				/**
				 * 2021 05 11 xh 修改默认选择的状态
				 * 新代码
				 */
				this.specGoods['spec'].forEach(function(spec, index) {
					spec['items'].forEach(function(item, key) {
						that.itemPrice[item['item_id']] = parseFloat(item['price'])
						item['checked'] = 0;
						if (Object.keys(cGoods).length > 0) {
							if (cGoods.item.indexOf(item['item_id']) != -1) {
								item['checked'] = 1;
								that.checkedNum = cGoods.num;
								that.checkedItems[item['item_id']] = item['item_name']
								that.checkedPrice += parseFloat(item['price'])
							}


						} else {
							if (key == 0) {
								item['checked'] = 1;
								(spec['select_type'] == 1) ? (() => {
									item['checked'] = 0;

									delete(that.checkedItems[item['item_id']])
								})() : (() => {
									that.checkedItems[item['item_id']] = item['item_name'];
									that.checkedPrice += parseFloat(item['price'])

								})();


							}
						}
					})
				});

			},
			checkItem(e) {
				this.is_change = false
				var that = this
				this.checkedNum = 0
				this.checkedPrice = parseFloat(this.specGoods.price)
				this.specGoods.spec[e.target.dataset.index]['items'].forEach(function(item, key) {
					if (that.specGoods.spec[e.target.dataset.index].select_type == 0) { //处理单选
						if (key == e.target.dataset.key) {
							item['checked'] = 1;
							that.checkedItems[item['item_id']] = item['item_name']
						} else {
							item['checked'] = 0;
							delete(that.checkedItems[item['item_id']])
						}
					} else { //处理多选
						if (key == e.target.dataset.key) {
							if (item['checked'] == 1) {
								item['checked'] = 0
								delete(that.checkedItems[item['item_id']])
							} else {
								item['checked'] = 1
								that.checkedItems[item['item_id']] = item['item_name']
							}
						}
					}
				})
				var nowItem = '' //当前选中的规格
				for (var item in this.checkedItems) {
					nowItem += item + ','
					that.checkedPrice += parseFloat(that.itemPrice[item])
				}
				if (nowItem) {
					nowItem = nowItem.substr(0, nowItem.length - 1)
				}
				if (Object.keys(this.cartList).length > 0) {
					for (var cartItem in this.cartList) {
						if (this.cartList[cartItem].goods_id == that.specGoods.goods_id && this.cartList[cartItem].item ==
							nowItem) {
							this.checkedNum = this.cartList[cartItem].num
						}
					}
				}
			},
			clearCart() {
				this.cartList = {}
				this.cartInfo = {
					'total_goods_price': 0,
					'goodsList': {}
				}
				this.cartHeight = '0px'
				this.cartGoodsNum = {}
				uni.removeStorageSync('cartList-' + this.shop_id)
				uni.removeStorageSync('cartInfo-' + this.shop_id)
				uni.removeStorageSync('cartGoodsNum-' + this.shop_id)
				uni.showToast({
					title: '购物车已清空',
					duration: 800
				});
			},
			/* 获取列表数据 */
			getListData() {
				this.apiRequest('/buyer/shopInfo', {
					shop_id: this.shop_id,
				}, 1).then(res => {
					this.shopinfo = res.data
					var that = this
					this.leftArray = this.shopinfo.goods;
					this.mainArray = Array.from(this.shopinfo.goods);
				
				})
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				let p_arr = [];
				let new_p = (selector) => {
					return new Promise((resolve, reject) => {
						let view = uni.createSelectorQuery().in(this).select(selector);
						setTimeout(() => {
							view.boundingClientRect(data => {
								resolve(data.top);
							}).exec();
						}, 300)
					})
				}

				/* 遍历数据，创建相应的 Promise 数组数据 */
				this.mainArray.forEach((item, index) => {
					p_arr.push(new_p(`#item-${index}`));
				});

				/* 所有节点信息返回后调用该方法 */
				Promise.all(p_arr).then((data) => {
					this.topArr = data;
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				this.isfixed = true
				let top = e.detail.scrollTop;
				//console.log(top)
				if (top <= 20) {
					this.isfixed = false;
				}

				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = (this.topArr.length - 1); i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					console.log(top)
					console.log(this.topArr[i])
					if ((top + 2) >= this.topArr[i] - 400) {
						index = i;
						break;
					}
				}
				//console.log(this.leftIndex)
				this.leftIndex = (index < 0 ? 0 : index);
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.isfixed = true
				this.leftIndex = index
				this.scrollInto = `item-${index}`;
			},
			cartToggle(e) {
				if (this.cIshide == true) {
					this.cIshide = false;
				} else {
					this.cIshide = true;
				}
			},
			previewImg(src, urls) {
				uni.previewImage({
					current: src,
					urls
				})
			},
			tabChange(i) {
				this.tabIndex = i;
				if (i == 1) {
					this.isshopShow = false;
					this.isfixed = false;
				} else {
					this.isshopShow = true;
				}

			},
			commChange(i) {
				this.commIndex = i
				switch (i) {
					case 0:
						this.commentNow = this.commentList.all
						break
					case 1:
						this.commentNow = this.commentList.figure
						break
					case 2:
						this.commentNow = this.commentList.high
						break
					case 3:
						this.commentNow = this.commentList.bad
						break
				}
			},
			subOrder(shop_id) { //去结算
				if (this.shopinfo.status == 0) {
					uni.showToast({
						title: '该店铺暂停营业',
						duration: 1000,
						icon: 'none'
					});
					return;
				}
				this.apiRequest('/buyer/userInfo', { //判断登陆是否有效
					area_id: uni.getStorageSync('area_id')
				}, 1).then(r => {
					if (r.code == 200) {
						this.apiRequest('/buyer/addCart', { //提交的时候再次更新，防止长时间停留导致预计时间出错
							cartList: this.cartList,
							shop_id: this.shop_id,
							user_id: this.user_id
						}).then(res => {
							if (res.code == 200) {
								this.cartInfo = res.data
								uni.setStorageSync('cartInfo-' + this.shop_id, this.cartInfo)
								uni.navigateTo({
									url: '/app/ShopCenter/pages/orderSub?shop_id=' + shop_id
								});
							}
						})
					}
				})

			},
			collectShop(shop_id) { //收藏店铺
				this.apiRequest('/buyer/collectShop', {
					shop_id: shop_id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1000
					});
					this.shopinfo.is_collect = 1
				})
			},
			collectDel(shop_id) { //取消收藏
				this.apiRequest('/buyer/collectDel', {
					shop_id: shop_id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1000
					});
					this.shopinfo.is_collect = 0
				})
			},
			searchGoods() {

				uni.navigateTo({
					url: "/app/TakeOut/pages/index/searchGood"
				})
				// this.$refs.searchGoods.open();
			},
			getGoods(e) {

				this.apiRequest('/buyer/searchGoods', {
					shop_id: this.shop_id,
					keyword: this.keyword
				}).then(res => {
					this.searchList = res.data

				})
			},
			closeSpec() {
				this.is_show_spec = 0
			},
			goback() {
				uni.navigateBack({

				})
			},

			goodsDetail(index, index2) {
				if (index == 'rec') {
					this.goodsInfo = this.shopinfo.recommend[index2]
				} else {
					this.goodsInfo = this.shopinfo.goods[index].goodsList[index2]
				}
				this.$set(this.goodsInfo, 'spec_num', this.goodsInfo.spec.length)
				console.log(this.goodsInfo)
				this.imgList = this.goodsInfo.goods_thumbs
				this.$refs.gDetail.open()
			},
			/**
			 * 绘制抛物线
			 */
			addPoint(e) {
				let ballX = e.x,
					ballY = e.y;
				this.createAnimation(ballX, ballY);

			},

			// 延迟执行
			setDelayTime(sec) {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve()
					}, sec)
				});
			},
			/**
			 * 创建动画
			 */
			createAnimation(ballX, ballY) {
				let bottomX = this.card.x;
				let bottomY = this.card.y;
				var animationX = this.flyX(bottomX, ballX); // 创建小球水平动画
				var animationY = this.flyY(bottomY, ballY); // 创建小球垂直动画
				this.ballX = ballX; // 小球当前位置X
				this.ballY = ballY; // 小球当前位置Y
				this.showBall = true; // 显示小球
				this.setDelayTime(10).then(() => {
					this.animationX = animationX.export(); // 执行动画X
					this.animationY = animationY.export(); // 执行动画Y
					// 400ms延时, 即小球的抛物线时长
					return this.setDelayTime(400);
				}).then(() => {
					this.animationX = this.flyX(0, 0, 0).export(); // 执行动画X
					this.animationY = this.flyY(0, 0, 0).export(); // 执行动画Y
					this.showBall = false; // 隐藏小球
					this.shoppingCartAnimation = true // 购物车动画
					// 400ms延时, 即小球的抛物线时长
					return this.setDelayTime(400);
				}).then(() => {
					this.shoppingCartAnimation = false // 购物车动画
				})
			},

			// 水平动画
			flyX(bottomX, ballX, duration) {
				/**
				 * bottomX 结束位置
				 * ballX 开始位置
				 * duration 动画持续时间
				 */
				let animation = uni.createAnimation({
					duration: duration || 400,
					timingFunction: 'linear',
				})
				console.log(bottomX)
				animation.translateX(bottomX - ballX).step(); // 动画效果
				return animation;
			},
			// 垂直动画
			flyY(bottomY, ballY, duration) {
				/**
				 * bottomY 结束位置
				 * ballY 开始位置
				 * duration 动画持续时间
				 */
				let animation = uni.createAnimation({
					duration: duration || 400,
					timingFunction: 'ease-in',
				})
				animation.translateY(bottomY - ballY).step(); // 动画效果
				return animation;
			}





		},
		onPageScroll(e) {
			let view = uni.createSelectorQuery().in(this).select(".s-cont .hov");
			view.boundingClientRect(data => {
				if (data.top <= 100) {
					this.isfixed = true
				} else {
					this.isfixed = false
				}
			}).exec();
		}
	}
</script>


<style scoped>
	view {
		line-height: 1.8;
	}
	.close-spec{
		font-size: 60upx;
		color: white;
	}

	.spec-box-head {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		min-height: 120upx;
	}

	.spec-goods-img {
		width: 120upx;
		height: 120upx;
		border-radius: 20upx;
	}

	.spex-box-name {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10upx;
	}

	.spec-goods-title {
		line-height: 1.5;
		overflow: hidden;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.close-box {
		position: absolute;
		width: 90%;
		min-height: 100upx;
		margin-top: 50upx;
		background-color: transparent;

	}

	.close-spec {
		font-size: 60upx;
		color: white;
	}

	.ball {
		height: 40rpx;
		width: 40rpx;
		border-radius: 50%;
		position: fixed;
		background-color: #1270E0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 32upx;
		font-weight: 600;

	}

	.cuIcon-cart {
		font-size: 50upx;
		color: white;
	}

	.ballBOX {
		z-index: 999;
	}

	/* 购物车动画 */
	.shoppingCartAnimations {
		animation: shoppingCartAnimation 1s;
	}

	@keyframes shoppingCartAnimation {
		0% {
			opacity: 0;
			transform: scale3d(.3, .3, .3)
		}

		20% {
			transform: scale3d(1.1, 1.1, 1.1)
		}

		40% {
			transform: scale3d(.9, .9, .9)
		}

		60% {
			opacity: 1;
			transform: scale3d(1.03, 1.03, 1.03)
		}

		80% {
			transform: scale3d(.97, .97, .97)
		}

		to {
			opacity: 1;
			transform: scaleX(1)
		}
	}

	.hide {
		display: none !important;
	}

	.smainfixed {
		position: fixed;
		top: 0;
	}

	.shop-header {
		width: 100%;
		padding-top: 20upx;
		position: relative;
		display: flex;
		justify-content: center;
		line-height: 1.2 !important;
	}

	.star-act {
		width: 20rpx;
		height: 20rpx;
		margin-right: 5rpx;
	}

	.head-ico {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.head-back {
		margin-right: 20rpx;
		width: 20rpx;
		height: 30rpx;
		margin-top: 16rpx;
		margin-left: 10rpx;
	}

	.shop-bg {
		position: absolute;
		top: 0;
		background: #1270e0;
		width: 100%;
		height: 220rpx;
	}

	.shop-info-box {
		position: relative;
		bottom: 0;

		background: #FFFFFF;
		width: 88vw;
		min-height: 250upx;
		max-height: 350rpx;
		overflow: hidden;
		padding: 3% 3% 3% 3%;
		border-radius: 10rpx;
		-moz-box-shadow: 0px 0px 6px #EEEEEE;
		-webkit-box-shadow: 0px 0px 6px #EEEEEE;
		box-shadow: 0px 0px 6px #EEEEEE;
		border: 1rpx solid #dddddd;
	}

	.shop-info-box view {
		background-color: #FFFFFF;
	}

	.showlogo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		-moz-box-shadow: 0px 0px 20px #cccccc;
		-webkit-box-shadow: 0px 0px 20px #cccccc;
		box-shadow: 0px 0px 20px #cccccc;
	}

	.shop-all-tit {
		display: flex;
		flex-direction: row;
		justify-content: start;
		margin-bottom: 10rpx;
	}

	.shop-rig {
		max-width: 75vw;
		overflow: hidden;
	}

	.shop-rig view {
		line-height: 1.3;
	}

	.shop-title {
		padding: 5rpx 20rpx;
		width: 100%;
	}

	.shop-title text {
		font-size: 36rpx;
		font-weight: bold;
	}

	.s-label {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-left: 15rpx;
	}

	.s-label-item {
		margin-right: 15rpx;
	}

	.s-label-item text {
		font-size: 24rpx;
		color: #666666;
	}

	.s-notice {
		font-size: 24rpx;
		max-height: 100upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.s-prom-label {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.s-prom-label-list {
		max-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.s-prom-label-list text {
		border: solid 1px #ffe6e6;

		font-family: PingFang-SC-Medium;
		font-size: 11px;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #fe4646;
		padding: 3rpx 5rpx;
		border-radius: 5rpx;
	}

	.s-main-condiner {
		width: 100%;
		background: #F7F7F7;
		position: relative;

	}

	.s-nav {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		padding: 0 3%;
		text-align: center;
		background: #FFFFFF;
		position: sticky;
		z-index: 97;
	}

	.s-nav view {
		background-color: #FFFFFF;
	}

	.s-nav-item {
		padding: 10rpx;
		margin: 0rpx 5%;
		font-size: 32rpx;
		color: #FF999999;
	}

	.s-nav .hov {
		border-bottom: #1270e0 2px solid;
		color: #000000;
	}

	.pd-top-15 {
		padding-top: 10rpx;
	}

	.la-small {
		color: #FF999999;
		font-size: 18rpx;
	}

	.s-recommed {
		height: 210rpx;
		width: 100%;
		background: #EEEEEE;
		padding: 8rpx 0;
		white-space: nowrap;
	}

	.s-recommed-item {
		width: 48%;
		display: inline-block;
		text-align: center;
		background: #F7F7F7;
		margin: 0 1%;
	}

	.s-rec-goods {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		text-align: left;
		padding: 2%;
		align-items: center;
		align-content: center;
	}

	.s-rec-goods .sg-thumb {
		height: 170rpx;
		width: 170rpx;
		margin-right: 2%;
		border-radius: 10rpx;
	}

	.s-rec-title {
		font-weight: bold;
		width: 180rpx;
	}

	.s-rec-sales text {
		font-size: 20rpx;
		color: #666666;
	}

	.s-rec-price {
		font-size: 24rpx;
		color: #F43F3B;
	}

	.s-pass-price {
		font-size: 18rpx;
		color: #CCCCCC;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.s-cart-add {
		text-align: right;
		line-height: 1.2;
	}

	.list_box_fixed {
		position: fixed;
		top: 190rpx;
		border-top: 1rpx solid #EEEEEE;
	}

	.cart-box {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background: #F7F7F7;
		z-index: 99;
	}

	.cart-left {
		width: 70%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		position: relative;
	}

	.cart-left .cartIco {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		text-align: center;
		align-items: center;
		background: #1270E0;
		position: absolute;
		top: -10rpx;
		left: 10rpx;
	}

	.cart-left .cartIco image {
		width: 50%;
		height: 50%;
		margin-top: 20rpx;
	}

	.cart-left .num {
		position: absolute;
		top: -20upx;
		left: 85rpx;
		background: #F43F3B;
		border-radius: 50%;
		font-size: 20rpx;
		height: 45rpx;
		width: 45rpx;
		line-height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #F7F7F7;
		border: 1px solid #F7F7F7;
	}

	.cart-left .cart-info {
		margin-left: 120rpx;
		padding-top: 10rpx;
	}

	.cart-info view {
		line-height: 1.2 !important;
	}

	.cart-left .total-price {
		color: #0066CC;
		font-size: 30rpx;
	}

	.cart-left .total-price .hxPrice {
		color: #666666;
		font-size: 20rpx;
		text-decoration: line-through;
		margin-left: 15rpx;
	}

	.cart-left .shipping-fee {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.cart-right {
		width: 30%;
		background: #EEEEEE;
		text-align: center;
		padding-top: 25rpx;
	}

	.sub-order {
		width: 30%;
		background: #1270e0;
		text-align: center;
		padding-top: 25rpx;
		color: #FFFFFF;
	}

	.cart-bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #000000;
		z-index: 98;
		filter: alpha(Opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}

	.cart-hide {
		display: none;
	}

	.cart-goods-list {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		z-index: 99;
		background: #F7F7F7;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;
	}

	.cart-goods-list .prom-info {
		text-align: center;
		font-size: 24rpx;
		background: #EEEEEE;
		padding: 10rpx;
	}

	.cart-goods-list .list-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 92%;
		margin-left: 4%;
		padding: 1% 0%;
		height: 100upx;
		align-items: center;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.clear-cart {
		font-size: 28rpx;
	}

	.list-goods view {
		line-height: 1.5;
	}


	.list-goods-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		min-height: 100rpx;
		width: 92%;
		margin-left: 4%;
		padding-top: 10upx;
		padding-bottom: 10upx;
		background: #F7F7F7;
		border-bottom: 1rpx solid #EEEEEE;

	}

	.list-goods-item .cart-goods-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20upx;
	}

	.list-goods-item .cart-goods-info {
		position: relative;
		width: 82%;
	}

	.cart-goods-info .goods-title {
		font-size: 28rpx;
		font-weight: 700;
	}

	.spec-key-item {
		margin-left: 10rpx;
	}

	.spec-key text {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 1;
	}

	.cart-goods-info .spec-key {
		margin: 0rpx 0;
		white-space: nowrap;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.cart-goods-info .price {
		font-size: 26rpx;
		font-weight: 700;
		color: #F43F3B;
	}

	.num-btn {
		position: absolute;
		bottom: 5rpx;
		right: 0rpx;
	}

	.chose-btn {
		background-color: #1270e0 !important;
		color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		padding: 2rpx 20rpx;
	}

	.chose-btn .g-txt {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
	}

	.rec-cart-num {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 40rpx
	}

	.s-cont {
		width: 100%;
		background: #F7F7F7;
	}

	.s-cont-fixed {
		position: fixed;
		top: 198rpx;
	}

	.s-cont .s-cont-item {
		display: none;
	}

	.s-cont .hov {
		display: block !important;
	}

	.comment-tag {
		width: 100%;
		height: 100upx;
		text-align: center;
		display: flex;
		background: #FFFFFF;
		justify-content: space-around;
		box-shadow: 0px 5upx 20upx 0px rgba(0, 0, 0, 0.05);
	}

	.comment-tag-fixed {
		width: 100%;
		height: 100upx;

		top: 0rpx;
		position: fixed;
		background: #F7F7F7;
		z-index: 99;

	}

	.comment-tag text {
		padding: 5rpx 15rpx;
		background: #EEEEEE;
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 5rpx 30rpx;
	}

	.comment-tag text.achov {
		background: #1270e0;
		color: #F7F7F7;
	}

	.comment-list {
		width: 100%;
		height: 92vh;
	}

	.shop-detail {
		width: 100%;
		background-color: #FFFFFF;
	}

	.shop-detail view {
		background-color: #FFFFFF;
	}

	.shop-detail-item {
		width: 100%;

		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
		padding: 2% 4% 2% 4%;
		margin-bottom: 10rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.shop-detail-item text {
		font-size: 24rpx;
		color: #666666;
	}

	.shop-detail-item .title {
		color: #000000;
	}

	.Enviro-title {
		width: 100%;
		font-size: 24rpx;
		font-weight: bold;
		padding: 2% 2% 0 2%;
	}

	.Enviro .imgs {
		display: flex;
		flex-wrap: wrap;
		padding-top: 6rpx;
		justify-content: flex-start;
	}

	.Enviro .imgs .imgs-box {
		width: 32%;
		margin-top: 10upx;
		box-sizing: border-box;
		margin-left: 1%;
	}

	.Enviro .imgs .imgs-box image {
		width: 90%;
		height: 28vw;
		border-radius: 20rpx;
	}



	.shopStatus {
		background-color: #0000FF;
	}

	.bg-gray1 {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		background: #F7F7F7;
	}

	.comment-tag {
		display: flex;
		align-items: center;
	}

	.comment-tag button {
		height: 60%;
	}

	.line-box {
		width: 100%;
		height: 15upx;
		background-color: #F7F7F7;
	}

	.head-back {
		height: 90%;
		font-size: 48upx;
		display: flex;
		align-items: center;
		padding-right: 20upx;
	}

	.searchGoods {
		width: 100vw;
		height: 100vh;

		position: relative;
	}

	.head-ico {
		margin: 0;
	}

	.top-shop-search1 {
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.shop-search-bar {
		height: 90%;
		display: flex;
		align-content: center;
	}

	.goods {
		width: 94%;
		margin-left: 3%;
		padding-left: 10upx;
		border-radius: 10upx;
	}

	.search-box .search-fixed {
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		z-index: 99;
		background-color: #FFFFFF;
	}

	.search-box {
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #F7F7F7;

	}

	.top-shop-search {
		width: 100%;
		position: relative;
	}

	.search-box-item {
		width: 96%;
		height: 96%;
	}

	.top-search {
		width: 100%;
		position: relative;

	}

	.search-box input {
		border-radius: 15rpx;
		background-color: #FFFFFF;
		width: 96%;
		height: 100%;
		margin-left: 2%;
		line-height: 45rpx;
		text-align: center;

	}

	.cuIcon-cart {
		font-size: 50upx;
		color: white;
	}
</style>
<style lang="scss">
	.spex-box-name {
		width: 750*0.8*0.9-140upx;
		min-height: 120upx;
	}

	.gDetail-info {
		position: relative;
		padding: 0 30rpx 30rpx 30rpx;
	}

	.gDetail-info .num-btn {
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
	}

	.shop-search-box {
		display: flex;
		width: 100vw;
		padding-left: 1%;
		background: #1270e0;
		align-items: center;
		flex-direction: row;
	}

	.shop-search-bar {
		width: 40%;
		margin-right: 20rpx;
		background: #1270e0;
	}

	.shop-search-input {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding-left: 2%;
	}

	.no-show {
		display: none;
	}

	.no-recommed {
		width: 100%;
	}

	.no-recommed image {
		width: 100%;
		height: 210rpx;
	}

	.gDetail-cont {
		background: #FFFFFF;
		width: 100%;
	}

	.spec-main {
		z-index: 9999;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;

		background-color: rgba(0, 0, 0, 0.5)
	}

	.close-spec-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.g-num {
		position: absolute;
		right: 5rpx;
		top: -15rpx;
		color: #FFFFFF;
		background: #FF3333;
		border-radius: 50%;
		display: block;
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		font-size: 20rpx;
		text-align: center;
		padding: 5rpx;
	}

	.spec-box {
		width: 80%;
		min-height: 200rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 30rpx 5%;
		margin-left: 10%;
		position: relative;
		top: 50%;
		/*偏移*/
		transform: translateY(-50%);
	}

	.spec-box view {
		background-color: #FFFFFF;
	}

	.spec-box .name {
		font-weight: bold;
		width: 100%;
	}

	.spec-box .checked-key {
		font-size: 20rpx;
		color: #666666;
	}

	.spec-box .checked-key text {
		margin-right: 15rpx;
	}

	.spec-box .spec-item-list .spec-item {
		margin-top: 20rpx;
	}

	.spec-box .spec-item-list .spec-key-name {
		font-size: 24rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: flex;
	}

	.spec-box .spec-item-list .item-key text {
		background: #EEEEEE;
		padding: 8rpx 20rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		display: inline-block;
	}

	.spec-box .spec-item-list .item-key text.hov {
		background: #1270e0;
		color: #FFFFFF;
	}

	.spec-box .spec-box-foot {
		border-top: 1rpx solid #EEEEEE;
		padding-top: 15rpx;
		margin-top: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.spec-box .spec-box-foot .total-price {
		font-size: 24rpx;
	}

	.spec-box .spec-box-foot .total-price .price {
		color: #F43F3B;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.searchbox {
		width: 90%;
		margin-left: 5%;
		height: 90%;
		display: flex;
		align-items: center;
		position: relative;
		background-color: #FFFFFF;
		text-align: center;
		justify-content: center;
		border-radius: 20upx;
	}

	.cuIcon-search {
		position: absolute;
		float: right;
		right: 1vw;
		font-size: 50upx;
	}


	.changeBt .add {
		background: #1270e0;
		color: #FFFFFF;
		padding: 5rpx 15rpx;
	}

	.search-main {
		width: 100%;
		background: #FFFFFF;

		border-radius: 10rpx;
	}

	.goods-list {
		padding: 20rpx 0;
		height: 850rpx;
		background-color: #F7F7F7;
	}


	.goods-list .goods {
		display: flex;
		border-radius: 20rpx;
		padding: 10rpx 10upx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		
	}

	.goods-list .goods view {
		background-color: #FFFFFF;
	}

	.goods-list .goods .goods-thumb {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	.goods-list .goods .describe {
		color: #666666;
		font-size: 24rpx;
	}

	.delivery-tips {
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.list_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;
		z-index: 100;
		width: 100%;


		.left {
			width: 150rpx;
			background-color: #f6f6f6;

			.item {
				padding: 20rpx 0;
				position: relative;
				text-align: center;
				font-family: PingFang-SC-Medium;
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #333333;
				/* &:first-child{
			 margin-top: 15rpx;
			 } */

				&.active {
					color: #1270e0;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			padding-bottom: 60rpx;
			width: 80%;
			flex-grow: 1;
			padding-top: 10rpx;
			box-sizing: border-box;


			.title {
				font-size: 24rpx;
				font-weight: bold;
				padding-left: 20rpx;
				color: #666;
				position: sticky;
				top: 0;
				z-index: 19;
				background-color: #F7F7F7;
			}

			.item {
				padding-bottom: 10rpx;
				background-color: #FFFFFF;
			}

			.item:last-of-type {
				padding-bottom: 50rpx;
			}

			.goods view {
				background-color: #FFFFFF;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 10rpx;
				background-color: #FFFFFF;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
				}

				.name {
					color: #000000;
					width: 90%;
					font-weight: bold;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
					width: 90%;
				}

				.money {
					font-size: 28rpx;
					color: #fe4646;
				}
			}
		}
	}
</style>
